/* 
  目标：Context优缺点
  缺点：🔔增加组件的嵌套解构，难以阅读和理解
  优点：
    1. 🔔是React自带的跨组件通信方案，不需要额外下包
    2. 第三方的包喜欢用这个，减少体积
  场景🔔：
    1. 多语言切换
    2. 一键换肤
      1. App定义全局样式 state = { backgroundColor: 'red', color: 'blue' };
      2. 提供数据给后代 Provider value={this.state}
      3. 后代接收到样式后，渲染到页面<div style={data}>
      4. 定义按钮，一键换肤,本质上只是修改了 state 数据，并且传递给了后代
*/

import React from 'react';

// 1. React.createContext创建上下文, 解构出两个组件
const { Provider, Consumer } = React.createContext();
class App extends React.Component {
  state = { backgroundColor: 'red', color: 'blue' };
  changeColor = () => {
    this.setState({ backgroundColor: 'green', color: 'yellow' });
  };

  render() {
    return (
      <div>
        <Provider value={this.state}>
          <Son></Son>
        </Provider>
        <button onClick={this.changeColor}>点我一键换肤</button>
      </div>
    );
  }
}
class Son extends React.Component {
  render() {
    return (
      <div>
        <Consumer>
          {(data) => {
            return (
              <div style={{ data }}>
                我是Son组件
                <GrandSon></GrandSon>
              </div>
            );
          }}
        </Consumer>
      </div>
    );
  }
}

class GrandSon extends React.Component {
  render() {
    return (
      <div>
        我是GrandSon组件
        <Consumer>
          {(data) => {
            return <div style={data}>{JSON.stringify(data)}</div>;
          }}
        </Consumer>
      </div>
    );
  }
}
export default App;
